<!-- 用户关注和被关注页面 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="top_title" v-if="state == 1">{{ taOrMe }}关注的人</div>
        <div class="top_title" v-if="state == 2">关注{{ taOrMe }}的人</div>
      </div>
    </van-sticky>

    <div v-if="userList.length !== 0">
      <van-search
        v-model="searchKey"
        placeholder="搜索昵称、用户名"
        @search="onSearch"
        @update:model-value="onSearch"
        :clearable="false"
      />
    </div>

    <van-empty
      v-if="userList.length === 0 && state == 1"
      image="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/diary/empty01.jpg"
      image-size="20rem"
      description="您没有关注任何人"
    />

    <van-empty
      v-if="userList.length === 0 && state == 2"
      image="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/diary/empty01.jpg"
      image-size="20rem"
      description="还没有人关注你"
    />

    <!-- 加载组件 -->
    <van-loading type="spinner" color="#74E2EE" v-show="loadShow" />

    <!-- 该用户关注的用户列表、、、或者该用户被关注的用户列表 -->
    <div class="list_main">
      <div class="per_user" v-for="(item, index) in userList" :key="index">
        <div class="avatar" @click="toUserPage(item.user.aid)">
          <van-image
            round
            width="3rem"
            height="3rem"
            :src="
              item.user.avatar
                ? item.user.avatar
                : 'https://img1.baidu.com/it/u=976756706,3571002820&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
            "
          />
        </div>
        <div class="name_count" @click="toUserPage(item.user.aid)">
          <div class="name_style">
            {{ item.user.nickName ? item.user.nickName : item.user.userName }}
          </div>
          <div class="day_moment_style">
            {{ item.birthDayCount }}天，{{ item.momentCount }}条瞬间
          </div>
        </div>
        <div class="concern">
          <van-button
            plain
            hairline
            type="primary"
            round
            size="small"
            color="#606266"
            @click="concernOrCancel(item)"
          >
            &emsp;{{ item.isConcerned }}&emsp;
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryUserConcernList,
  concernUser,
  cancelConcernUser,
} from '../../api/user.js'
export default {
  data() {
    return {
      state: this.$route.query.state, // 用户关注的人状态为1，该用户被哪些人关注，状态为2
      taOrMe: '', // ta或者我，主要看当前登陆的用户是否是自己
      userAid: this.$route.query.userAid, // 这个用户的aid
      searchKey: '', // 搜索关键字
      loadShow: false, // 控制加载组件的显示
      userList: [], // 用户列表
    }
  },
  created() {
    // 查询该用户关注的用户列表或者被关注的用户列表
    this.queryList()
  },
  methods: {
    // 搜索关键字
    onSearch() {
      const _this = this
      this.loadShow = true
      setTimeout(() => {
        _this.queryList()
        this.loadShow = false
      }, 500)
    },
    // 查询该用户关注的用户列表或者被关注的用户列表
    queryList() {
      const params = {
        userAid: this.userAid,
        searchKey: this.searchKey,
        state: this.state,
      }
      queryUserConcernList(params).then((res) => {
        // console.log(res)
        this.taOrMe = res.data.data.taOrMe
        this.userList = res.data.data.userList
      })
    },

    // 去用户主页
    toUserPage(aid) {
      this.$router.push({
        path: '/userPersonalMainPage',
        query: {
          userAid: aid,
        },
      })
    },

    // 关注或者取消关注
    concernOrCancel(item) {
      const _this = this
      if (item.isConcerned === '已关注') {
        // 已经关注了现在要取消关注
        this.$dialog
          .confirm({
            message: '确定不再关注ta了吗？',
          })
          .then(() => {
            // 取消关注这个用户
            cancelConcernUser(item.user.aid).then(() => {
              _this.queryList()
            })
          })
          .catch(() => {
            // 取消不做任何事情
          })
      } else {
        // 点击关注，关注这个用户
        // console.log(item.user.aid);
        concernUser(item.user.aid).then(() => {
          this.$toast({
            type: 'success',
            message: '关注成功！',
            duration: 800,
          })
          _this.queryList()
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.top_div {
  width: 100%;
  height: 2em;
  background-color: rgb(86, 82, 82);
  color: aliceblue;
  padding-top: 2em;
  display: flex;
}
.return_div {
  width: 30px;
  padding-left: 20px;
}
.top_title {
  width: 40%;
  text-align: center;
  margin-left: 3.5em;
  margin-right: auto;
  color: rgb(249, 239, 221);
  font-weight: 500;
  font-size: 16px;
}
/deep/ .van-loading {
  padding-left: 170px;
  padding-top: 30px;
}
.per_user {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  margin-bottom: 10px;
}
.name_count {
  position: relative;
  left: -2em;
}
.name_style {
  font-size: 16px;
  color: #303133;
}
.day_moment_style {
  color: #909399;
  font-size: 14px;
}
</style>
